<include file="public@header" />
<link rel="stylesheet" href="__STATIC__/css/zTree_v3/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
    body {
        background-color: white;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    div, p, table, th, td {
        list-style: none;
        margin: 0;
        padding: 0;
        color: #333;
        font-size: 13px;
        font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
    }
    #testIframe {
        margin-left: 10px;
    }
    .expander{margin-left: -20px;}
    .action_ul{overflow:hidden; font-size:16px; font-family:'黑体'; margin:10px 0px;}
    .action_ul li{padding:0px 10px; display:inline;text-align:center; float:left; cursor:pointer}
    .action_ul li img{margin:5px 0; width: 18px}
    .action_ul li p{margin: 0 0 5px;}
    .visua_child{position:relative;display: inline-block;width:155px; height:160px; border-radius:10px; margin:3px; text-align:center; padding:15px 0 10px 0; vertical-align: text-top;}
    .visua_child input{margin: 0 2px; background:#fff}
    .visua_child p{margin: 0 0 3px; width: 100%;height: auto;white-space:normal;overflow: hidden;}

    .borderRight{border-right:2px solid #ccc}
    .bg_qianlv{background-color:#E9FEC0;}
    .bg_huanglv{background-color:#808000;}
    .bg_lan{background-color:#8080FF;}
    .bg_cheng{background-color:#F7E1CC;}
    .bg_hui{background-color:#E6E6E6;}
    .bg_bai{background-color:#fff; border:1px solid #000}
    .bg_lv{background-color:#00CC00;}
    .bg_huang{background-color:#F3D776;}
    .bg_red{background-color:#FF6699;}
    .bg_mei{background-color:#E792E0;}
    .bg_blue{background-color:#33CCFF;}
    .gege{width:15px; height:15px; float:left; margin:0 3px}
    .visua_child img{position:absolute; margin-top:-15px; left:85%; width:15px; height:15px}

    #center-tree{
        width: 16.12%;
        padding: 0;
        border-right: 1px solid #cccccc;
        overflow-y: auto;
        height: 730px;
        border-right: #999999 1px dashed;
    }
    #center-right {
        width: 83.2%;
        padding: 0;
    }
    #center-right .visua_div{
        border:2px solid #E3EEF4;
        white-space: nowrap;
        padding: 0;
        overflow-y: auto;
        height: 628px;
    }


</style>
<script type="text/javascript" src="__STATIC__/js/zTree_v3/jquery.ztree.core.js?3"></script>
<script type="text/javascript" src="__STATIC__/js/layer/layer.js"></script>
<SCRIPT type="text/javascript">
    var categorysNodes = '{$categorys}';
     var jsonNodes = JSON.parse(categorysNodes)
    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
            beforeClick: function (treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    var id = treeNode.id;
                    if(id>0){
                        getHtml(id,treeNode);
                    }
                    return true;
                }
            },
        }
    };
    $(document).ready(function () {
        console.log("{$selected_id_v}")
        $.fn.zTree.init($("#tree"), setting, jsonNodes);
        var zTree = $.fn.zTree.getZTreeObj("tree");
        var treeNode = zTree.getNodeByTId("{$selected_id_v}");
        if (treeNode){
            console.log(treeNode)
            zTree.selectNode(zTree.getNodeByParam("tId", "{$selected_id_v}",null))
            var id = treeNode.id;
            if(id>0){
                getHtml(id,treeNode);
            }
        }
    });
    //还原zTree的初始数据
    function InitialZtree() {
        $.fn.zTree.init($("#tree"), setting, jsonNodes);
    }

    function AutoMatch(txtObj) {
        if (txtObj.value.length > 0) {
            InitialZtree();
            var zTree = $.fn.zTree.getZTreeObj("tree");
            var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
            //将找到的nodelist节点更新至Ztree内
            $.fn.zTree.init($("#tree"), setting, nodeList);
            showMenu();
        } else {
            //隐藏树
            // hideMenu();
            InitialZtree();
        }
    }
    //显示树
    function showMenu() {
        $("#menuContent").slideDown("fast");
    }

    //隐藏树
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown");
    }

    //  查看墓位产品
    $(document).on("click","#editProductInfo",function(){
        var name = $("input[name='no[]']:checked");
        <!--没有子级时触发事件-->
        if(name.length < 1 ) {
            alert("请选择数据！");
        }else{
            var tombar_id = '',flag=false,selected_id_v=0;
            $.each($("input[name='no[]']:checked"),function(i,n){
                if(length==(i+1)){
                    tombar_id=tombar_id+$(this).val();
                    // devices=devices+ $(this).attr('data-devices');
                }else{
                    tombar_id=tombar_id+$(this).val()+',';
                }
                selected_id_v =  $(this).attr('data-id');
            });
            if(flag){
                return;
            }
            var url = '{:url("Admin/Visua/product")}?tomb_id='+ tombar_id + "&selected_id_v="+ selected_id_v ;
            console.log(url)
            $(this).attr("href",url);
        }
    });
    //产品信息
    $(document).on("click","#productInfo",function(){
        var name = $("input[name='no[]']:checked");
        console.log(name)
        // <!--没有子级时触发事件-->

    });
    //墓位 隐藏 -  删除
    $(document).on("click",".tombareacoldelete",function() {
        //var name = $("input[name='no[]']:checked").val();
        var length = $("input[name='no[]']:checked").length;
        if (length == 0) {
            layer.alert('请选择墓位', {icon: 5})
            return;
        }
        var col_id = '', flag = false,selected_id_v=0;
        $.each($("input[name='no[]']:checked"), function (i, n) {
            if (length == (i + 1)) {
                col_id = col_id + $(this).val();
            } else {
                col_id = col_id + $(this).val() + ',';
            }
            selected_id_v =  $(this).data('id');
        });
        if (flag) {
            return;
        }
        var $this = $(this), type = $this.data('type'),
            msg = $this.data('msg'),
            href = $this.data('href') + "?type=" + type + "&id=" + col_id + "&selected_id_v=" + selected_id_v;
        console.log(href)
        layer.confirm(msg, {
            icon: 3, title: "提示", btn: ['确定', '暂不']
            , btn1: function () {
                $.getJSON(href).done(function (data) {
                    if (data.code == 1) {
                        layer.alert(data.msg, {icon: 1, yes: function (index) {
                                layer.close(index);
                                window.location.href = data.url;
                            }})
                    } else if (data.code == 0) {
                        layer.alert(data.msg, {icon: 5, yes: function (index) {
                                $('input[type=checkbox]').attr('checked',false)
                                layer.close(index);
                                window.location.href = data.url;
                            }})
                    }
                })
            }, btn2: function () {
                $('input[type=checkbox]').attr('checked',false)
                layer.closeAll();
            }
        })
    })

    // 添加墓位信息
    $(document).on("click","#addTombstoneInformation",function(){
        console.log(12465)
        //var name = $("input[name='no[]']:checked").val();
        var length = $("input[name='no[]']:checked").length;
        if (length == 0) {
            alert("请选择墓位");
            return;
        }
        var col_id = '',order_id = '',flag=false,selected_id_v=0;
        $.each($("input[name='no[]']:checked"),function(i,n){
            if(length==(i+1)){
                col_id=col_id+$(this).val();
                order_id = order_id + $(this).data('order');
                // devices=devices+ $(this).attr('data-devices');
            }else{
                col_id=col_id+$(this).val()+',';
            }
            selected_id_v =  $(this).data('id');
        });
        if(flag){
            return;
        }
        var url = "{:url('Information')}?col_id="+col_id+"&order_id="+order_id+"&selected_id_v="+selected_id_v;
        console.log(order_id);
        $(this).attr("href",url);

    })
    $(document).on("click","#editTombarea",function(){
        var name = $("input[name='no[]']:checked");
        console.log(name)
        // <!--没有子级时触发事件-->
        // if(name.length < 1 ) {
        //
        // 	alert("请选择数据！");
        // }else{
        //
        // 	$(this).attr("href","{:url('Admin/Tombarea/add',array('id'=>1))}");
        //
        // }
    })

    $(document).on('click','#addTombarea',function () {
        var tombar_id = $(this).data('id');
        var selected_id_v = 0;
        $.each($("input[name='no[]']:checked"),function(i,n){
            selected_id_v =  $(this).attr('data-id');
        });
        var url = '{:url("Admin/Visua/add_tomb_col")}?tombar_id='+ tombar_id + '&selected_id_v='+selected_id_v ;
        window.location.href = url;
    })
    function getHtml(id,treeNode) {
        $('#addTombarea').attr("data-id",id);
        $.ajax({
            url		: "{:url('Visua/tombareacol')}",
            type	: "post",
            dataType: "json",
            data	: {'id':id,'Ajax': 1},
            success : function(result){
                if(result.data.length == 0){
                    $(".visua_div").html('');
                    return;
                }
                console.log(result.data)
                var html="";
                $.each(result.data, function(i, n){
                    if (n.cate_id==2){
                        $('.ys').css("display","block");
                    } else {
                        $('.ys').css("display","none");
                    }
                    $.each(n.col, function(y, m){console.log(m.status);
                        if(m.status == 1){
                            switch (m.col_status) {
                                case 1:html+="<div class='visua_child bg_blue'>";break;
                                case 2:html+="<div class='visua_child bg_cheng'>";break;
                                case 3:html+="<div class='visua_child bg_lv'>";break;
                                case 4:html+="<div class='visua_child bg_qianlv'>";break;
                                case 5:html+="<div class='visua_child bg_huang'>";break;
                                case 6:html+="<div class='visua_child bg_mei'>";break;
                                case 7:html+="<div class='visua_child bg_red'>";break;
                                case 8:html+="<div class='visua_child bg_hui'>";break;
                                default:html+="<div class='visua_child bg_huanglv'>";break;
                            }
                        }else{
                            html+="<div class='visua_child bg_bai'>";
                        }

                        if(m.reacher != '' && m.reacher != null ){
                            if(m.login_id != 1){
                                html+="<img src='__TMPL__/Public/assets/images/peo.png' name='diding' title='抵顶人姓名:"+m.reacher+"'/>";
                            }else{
                                // html+="<div style='text-align: right; padding-right: 5%; color: #13227a;'>"+m.reacher+"</div>";
                                html+="<div style='position: absolute; right: 5%;top: 1%; color: #13227a;'>"+m.reacher+"</div><p></p>";
                            }
                        }
                        html+="<p><input type='checkbox' name='no[]'data-id='"+treeNode.tId+"'  data-type='"+n.cate_id+"' data-order='"+m.order_id+"' value='"+m.colID+"' data-msg='"+n.cate_id+"'>"+m.num+"</p>";
                        // if(m.tomb_regulation == 1){
                        //     html+="<p>单穴</p>";
                        // }else if(m.tomb_regulation == 2){
                        //     html+="<p>双穴</p>";
                        // }else if(m.tomb_regulation == 3){
                        //     html+="<p>三穴</p>";
                        // }


                        if(m.col_status == 2 || m.col_status == 1 || m.col_status == 3){
                            if(m.selling_price) {
                                html += "<p>单价:" + m.selling_price + "</p>";
                            }
                        }
                        if(m.col_status == 2 || m.col_status == 3){
                            if (m.shoppingguide) {
                                html += "<p>业务员:" + m.shoppingguide + "</p>";
                            }
                        }
                        if(m.col_status == 5 || m.col_status == 6|| m.col_status == 7){
                            if (m.buyer_name) {
                                html += "<p>持证人:" + m.buyer_name + "</p>";
                            }
                        }
                        if(m.col_status == 6|| m.col_status == 7) {
                            if (m.deceased_name) {
                                html += "<p>逝者:" + m.deceased_name + "</p>";
                            }
                        }
                        html += "</div>";

                    })
                    html+="<br />";
                })
                $(".visua_div").html(html);

            },
            error	: function(){
                alert("服务器内部错误，请联系系统管理员");
            }
        });
    }
    //全选
    function selectAll(){
        var name = document.getElementsByName("no[]");
        for(var i=0;i<name.length;i++){
            name[i].checked=true;
        }
    }
    //全不
    function selectNone(){
        var name = document.getElementsByName("no[]");
        for(var i=0;i<name.length;i++){
            name[i].checked=false;
        }
    }
    //反选
    function selectInvert(){
        var name = document.getElementsByName("no[]");
        for(var i=0;i<name.length;i++){
            if(name[i].checked)
                name[i].checked=false ;
            else
                name[i].checked=true ;
        }
    }
</SCRIPT>
</head>

<body>

<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs" style="margin-bottom: 10;">
        <li class="active"><a href="">可视化墓区</a></li>
    </ul>
    <div class="row">
        <div class="col-lg-2" id="center-tree" >
            <input type="text" style=" width:95%; margin-bottom:5px;" onkeyup="AutoMatch(this)" id="searchkeyname" class="form-control" name="name" value="{$name}" placeholder="按照墓位区/层搜索"/>
            <div id="menuContent" class="menuContent">
                <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
            </div>

        </div>
        <div class="col-lg-8" id="center-right" >
            <div class="col-lg-12" style="padding: 0;">
                <div style=" overflow:hidden; background:#F7F7F7; padding:5px 10px">
                    <div class="bg_qianlv gege"></div><span style="float:left">无规划</span>
                    <div class="bg_huanglv gege"></div><span style="float:left">无产品</span>
                    <div class="bg_blue gege"></div><span style="float:left">空闲</span>
                    <div class="bg_cheng gege"></div><span style="float:left">已认购</span>
                    <div class="bg_lv gege"></div><span style="float:left">定金</span>
                    <div class="bg_huang gege"></div><span style="float:left">购买未使用</span>
                    <div class="bg_mei gege"></div><span style="float:left">部分安葬</span>
                    <div class="bg_red gege"></div><span style="float:left">全部安葬</span>
                    <div class="bg_hui gege"></div><span style="float:left">迁墓中</span>
                    <div class="bg_bai gege"></div><span style="float:left">已隐藏</span>
                </div>
                <ul class="action_ul">
                    <li>
                        <a id="editProductInfo">
                            <img src="__TMPL__/Public/assets/images/chakan.png">
                            <p>查看产品详情</p>
                        </a>
                    </li>
                    <li class="borderRight">
                        <a id="addTombstoneInformation">
                            <img src="__TMPL__/Public/assets/images/tianjia.png">
                            <p>添加墓位信息</p>
                        </a>
                    </li>
                    <li  class="ys" style="display: none;">
                        <a  class="tombareacoldelete "  data-msg="确定要移除选中的墓位吗？"
                            data-href="{:url('tombareacoldelete')}">
                            <img src="__TMPL__/Public/assets/images/fa-trash.png">
                            <p>移除墓位</p>
                        </a>
                    </li>
                    <li class="borderRight ys"   style="display: none ;">
                        <a id="addTombarea"  data-id="" data-href="{:url('add_tomb_col')}">
                            <img src="__TMPL__/Public/assets/images/col-ico.png">
                            <p>插入墓位</p>
                        </a>
                    </li>
                    <li>
                        <a  class="tombareacoldelete" data-msg="确定要取消隐藏吗？"
                            data-href="{:url('tombCancelUnhide')}">
                            <img src="__TMPL__/Public/assets/images/quxiaoyincang.png">
                            <p>取消隐藏</p>
                        </a>
                    </li>
                    <li class="borderRight">
                        <a class="tombareacoldelete" data-msg="确定要隐藏吗？"
                           data-href="{:url('tombCancelhide')}">
                            <img src="__TMPL__/Public/assets/images/yincang.png">
                            <p>隐藏</p>
                        </a>
                    </li>
                    <li >
                        <a href="javascript:location.reload();">
                            <img src="__TMPL__/Public/assets/images/shuaxin.png">
                            <p>刷新</p>
                        </a>
                    </li>
                    <li>
                        <p style=" margin-top: 10px;">
                            <a class="btn btn-default" onClick="selectAll()">全选</a>
                            <a class="btn btn-default" onClick="selectNone()">全不选</a>
                            <a class="btn btn-default" onClick="selectInvert()">反选</a>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="col-lg-12" style="padding: 0;">
                <div class="visua_div"></div>
            </div>
        </div>
    </div>

    <div>

            <div style="display: none" id="categorys">
                {$categorys}
            </div>
           <!-- <table border=0 style="align-items: left;">
                <tr>
                    <td width=15% align=left valign=top style="BORDER-RIGHT: #999999 1px dashed; padding-bottom: 2%">
                        <div>
                            <input type="text" style=" width:95%; margin-bottom:5px;" onkeyup="AutoMatch(this)" id="searchkeyname" class="form-control" name="name" value="{$name}" placeholder="按照墓位区/层搜索"/>
                            <div id="menuContent" class="menuContent">
                                <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
                            </div>
                        </div>
                    </td>
                    <td width=95% align=left valign=top>
                        <div style="width:80%; float:left;">
                            <div style=" overflow:hidden; background:#F7F7F7; padding:5px 10px">
                                <div class="bg_qianlv gege"></div><span style="float:left">无规划</span>
                                <div class="bg_huanglv gege"></div><span style="float:left">无产品</span>
                                <div class="bg_blue gege"></div><span style="float:left">空闲</span>
                                <div class="bg_cheng gege"></div><span style="float:left">已认购</span>
                                <div class="bg_lv gege"></div><span style="float:left">定金</span>
                                <div class="bg_huang gege"></div><span style="float:left">购买未使用</span>
                                <div class="bg_mei gege"></div><span style="float:left">部分安葬</span>
                                <div class="bg_red gege"></div><span style="float:left">全部安葬</span>
                                <div class="bg_hui gege"></div><span style="float:left">迁墓中</span>
                                <div class="bg_bai gege"></div><span style="float:left">已隐藏</span>
                            </div>
                            <ul class="action_ul">
                                <li>
                                    <a id="editProductInfo">
                                        <img src="__TMPL__/Public/assets/images/chakan.png">
                                        <p>查看产品详情</p>
                                    </a>
                                </li>
                                <li class="borderRight">
                                    <a id="addTombstoneInformation">
                                        <img src="__TMPL__/Public/assets/images/tianjia.png">
                                        <p>添加墓位信息</p>
                                    </a>
                                </li>
                                <li  class="ys" style="display: none;">
                                    <a  class="tombareacoldelete "  data-msg="确定要移除选中的墓位吗？"
                                        data-href="{:url('tombareacoldelete')}">
                                        <img src="__TMPL__/Public/assets/images/fa-trash.png">
                                        <p>移除墓位</p>
                                    </a>
                                </li>
                                <li class="borderRight ys"   style="display: none ;">
                                    <a id="addTombarea"  data-id="" data-href="{:url('add_tomb_col')}">
                                        <img src="__TMPL__/Public/assets/images/col-ico.png">
                                        <p>插入墓位</p>
                                    </a>
                                </li>
                                <li>
                                    <a  class="tombareacoldelete" data-msg="确定要取消隐藏吗？"
                                        data-href="{:url('tombCancelUnhide')}">
                                        <img src="__TMPL__/Public/assets/images/quxiaoyincang.png">
                                        <p>取消隐藏</p>
                                    </a>
                                </li>
                                <li class="borderRight">
                                    <a class="tombareacoldelete" data-msg="确定要隐藏吗？"
                                       data-href="{:url('tombCancelhide')}">
                                        <img src="__TMPL__/Public/assets/images/yincang.png">
                                        <p>隐藏</p>
                                    </a>
                                </li>
                                <li >
                                    <a href="javascript:location.reload();">
                                        <img src="__TMPL__/Public/assets/images/shuaxin.png">
                                        <p>刷新</p>
                                    </a>
                                </li>
                                <li>
                                    <p style=" margin-top: 10px;">
                                        <a class="btn btn-default" onClick="selectAll()">全选</a>
                                        <a class="btn btn-default" onClick="selectNone()">全不选</a>
                                        <a class="btn btn-default" onClick="selectInvert()">反选</a>
                                    </p>
                                </li>
                            </ul>
                            <div class="visua_div"></div>
                        </div>
                    </td>
                </tr>
            </table>-->
    </div>
</div>
</body>
</html>


